<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body,ul,li,p,h2{margin: 0;padding: 0}
        html,body{height: 100%;}
        li{list-style: none}
        body{
            background: #eee;
            position: relative;
        }
        #box{
            width: 500px;
            height: 500px;
            background: #fff;
            position: absolute;
            left:0;top:0;right:0;bottom:0;
            margin: auto;
            box-shadow: 0px 0px 30px 10px #ccc;
            border: solid 1px #bbb;
            border-radius: 10px;
            padding: 0 20px;
            box-sizing: border-box;
        }
        #box h2{
            line-height: 100px;
        }
        #box ul{
            display: flex;
            background: #ccc;
            line-height: 50px;
        }
        #box li{
            flex: 1;
            text-align: center;
        }
        #box li.active{
            background: pink;
        }
        #box p{
            margin: 20px 0;
        }
        #box span{
            display: inline-block;
            width: 130px;
            text-align: right;
        }
        #box input{
            height: 40px;
            width: 260px;
        }
        #box #btn{
            margin: 0 auto;
            display: block;
        }
        #box .msg{
            text-align: center;
            color: #f00;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2>请输入登录信息</h2>
        <ul>
            <li class="active">登录</li>
            <li>注册</li>
        </ul>
        <form>
            <p><span>用户名：</span><input type="text" id="username"></p>
            <p><span>密码：</span><input type="password" id="password"></p>
            <input type="button" value="登录" id="btn">
            <p class="msg"></p>
        </form>
    </div>
</body>
<script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>

<script>
    // 获取用户信息
    var uMsg = localStorage.getItem("userMsg");
    // 解析用户信息
    if(uMsg === null){
        uMsg = [];
    }else{
        uMsg = JSON.parse(uMsg);
    }
    // 解析数组中的数据，判断isLogin是否为ok
    var flag = false;
    for(var i=0;i<uMsg.length;i++){
        if(uMsg[i].isLogin === "ok"){
            flag = true;
            break;
        }
    }
    // 判断有没有登录
    if(flag){   // 如果已经登录
        location.href = "../index.html";
    }
</script>

<script>
    $("#box").find("li").eq(0).click(function(){
        $(this).addClass("active").siblings().removeClass("active")
        $("#box").find("h2").html("请输入登录信息")
        $("#btn").val("登录")
    })
    $("#box").find("li").eq(1).click(function(){
        $(this).addClass("active").siblings().removeClass("active")
        $("#box").find("h2").html("请输入注册信息")
        $("#btn").val("注册")
    })

    // 获取初始的用户信息
    var uMsg = localStorage.getItem("userMsg");
    // 判断是否获取成功
    if(uMsg === null){
        // 没有获取到，设置默认数据
        uMsg = [];
    }else{
        // 获取到了，解析数据
        uMsg = JSON.parse(uMsg);
    }

    $("#btn").click(function(){
        if($(this).val() === "登录"){
            // console.log("登录功能");
            login();
        }else{
            // console.log("注册功能");
            register();
        }
    })

// 登录功能
function login(){
    // 先准备，用来记录是否存在用户名的状态
    var onoff = false;
    // 遍历数据
    for(var i=0;i<uMsg.length;i++){
        // 判断用户名是否存在
        if(uMsg[i].un === $("#username").val()){
            // 存在，修改状态
            onoff = true;
            // 结束循环
            break;
        }
    }
    // 根据状态，判断用户名是否存在
    if(onoff){
        // 用户名存在，可以验证密码了
        if(uMsg[i].pw === $("#password").val()){
            // 成功的提示信息
            $(".msg").html("登录成功，3秒后跳转到首页");
            // 修改登录状态
            uMsg[i].isLogin = "ok";
            // 覆盖老数据
            localStorage.setItem("userMsg",JSON.stringify(uMsg));
            // 3秒后跳转到首页
            setTimeout(function (){
                location.href = "../index.html";
            }, 3000);
        }else{
            // 用户名存在，但是密码验证失败
            // 提示失败
            $(".msg").html("登录失败，用户名密码不匹配");
            // 清空密码框
            $("#password").val("");
        }
    }else{
        // 用户名不存在
        // 提示失败
        $(".msg").html("用户名不存在，请先<em class='reg'>注册</em>")
        // 在失败信息中，准备点击事件，让用户可以快速切换到注册功能，进行注册
        $(".reg").click(function(){
            $("#box").find("li").eq(1).addClass("active").siblings().removeClass("active")
            $("#box").find("h2").html("请输入注册信息")
            $("#btn").val("注册")
        })
    }
}

// 注册功能
// 存用户数据
    // 第一次存：直接存，注册成功
    // 非第一次存：判断用户名是否重复
        // 重复：用户名已存在，注册失败
        // 不重复：直接存，注册成功
    // [{un:"admin",pw:"123456",isLogin:"ok"},{},...]
function register(){
    // 判断是否存在用户数据
    if(uMsg.length < 1){
        // 第一次存：直接存，注册成功
        uMsg.push({
            un:$("#username").val(),
            pw:$("#password").val(),
            isLogin:""
        })
        // 提示注册成功
        $(".msg").html("注册成功，请<em class='log'>登录</em>")
    }else{
        // 非第一次存
        // 准备记录是否出现用户名的状态
        var onoff = false;
        for(var i=0;i<uMsg.length;i++){
            // 判断是否有用户名重复
            if(uMsg[i].un === $("#username").val()){
                // 修改状态
                onoff = true;
                // 结束循环
                break;
            }
        }
        // 根据状态，判断是否出现用户名
        if(onoff){
            // 出现了
            $(".msg").html("注册失败，用户名已存在");
            $("#username").val("");
        }else{
            // 没出现，注册
            uMsg.push({
                un:$("#username").val(),
                pw:$("#password").val(),
                isLogin:""
            })
            // 提示成功
            $(".msg").html("注册成功，请<em class='log'>登录</em>")
        }
    }
    // 在成功信息中，准备点击事件，让用户可以快速切换到登录功能，进行登录
    $(".log").click(function(){
        $("#box").find("li").eq(0).addClass("active").siblings().removeClass("active")
        $("#box").find("h2").html("请输入登录信息")
        $("#btn").val("登录")
    })
    // 以上操作都只是在操作数组，并没有将数据，存入到本地存储中
    // 设置localStorage保存数据
    localStorage.setItem("userMsg",JSON.stringify(uMsg));
}
</script>
</html>